<template>
  <div class="header">
    <div>
      <el-button type="primary" @click="addMeeting">添加</el-button>
    </div>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="meetingName" label="会议名称" width="180" />
    <el-table-column prop="startTime" label="会议开始时间" width="180" :formatter="formatterDate" />
    <el-table-column prop="endTime" label="会议结束时间" width="180" :formatter="formatterDate" />
    <el-table-column prop="location" label="会议地址" width="180" />
    <el-table-column prop="meetingContent" label="会议内容" width="180" show-overflow-tooltip />
    <el-table-column prop="toastmaster" label="主持人" width="180" show-overflow-tooltip />
    <el-table-column prop="participant" label="参与人员" width="180" show-overflow-tooltip />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <UnModel
    v-model="showModel"
    @onClose="closeModel"
    @onOk="onOk"
    :width="600"
    v-if="showModel"
    :title="modelType === 'add' ? '添加会议' : '编辑会议'"
  >
    <UnForm :formData="formData" :formConfig="formConfig" :formColumn="formColumn" ref="FF" v-if="showModel">
      <template v-slot:formSlot="{ item }">
        <el-input v-model="formData[item.fild]" @focus="onFocus" />
        <el-input v-model="formData.participantId" style="display: none" />
      </template>
    </UnForm>
  </UnModel>
  <UserMp
    title="分配用户"
    v-model="modelValue"
    v-if="modelValue"
    :selectUserId="userID"
    @onClose1="onCloseUser"
    @onOk1="onOkUser"
  ></UserMp>
</template>

<script lang="ts" setup>
import UnModel from '@/components/UnModel/index.vue'
import UnForm from '@/components/UnForm/index.vue'
import UserMp from '@/components/UserMultiple/index.vue'
import { getUser } from '@/api/mgmtUser'
import { column } from './config.js'
import { ref } from 'vue'
import dayjs from 'dayjs' // ES 2015
import { useStore } from '@/pinia/index'
import { ElMessage } from 'element-plus'
import { addDataApi, editDataApi, getMeetingDataApi,delMeeting,getAreaApi } from '@/api/meeting.js'
import { listToTree } from '@/utils'
const pinia = useStore()
// 弹窗相关
const modelType = ref('add')
const showModel = ref(false)
const addMeeting = () => {
  showModel.value = true
  modelType.value = 'add'
  formData.value.meetingName = ''
  formData.value.location = ''
  formData.value.meetingTime = []
  formData.value.toastmasterId = ''
  formData.value.toastmaster = ''
  formData.value.participantId = ''
  formData.value.participant = ''
}
const FF = ref('')
const onOk = async () => {
  const verify = await FF.value.checkForm()
  if (verify) {
    let name = formColumn.value[3].option.find((item) => {
      return item.value == formData.value.toastmasterId
    }).label
    formData.value.toastmaster = name
    formData.value.startTime = formData.value.meetingTime[0]
    formData.value.endTime = formData.value.meetingTime[1]
    formData.value.creator = pinia.userInfo.name
    formData.value.creatorId = pinia.userInfo.id
    console.log(formData.value)
    const fn = {
      add: addDataApi,
      edit: editDataApi
    }
    const res = await fn[modelType.value](formData.value)
    if (res.code === 200) {
      showModel.value = false
      getMetingData() 
    }
  }
}
const closeModel = async () => {
  await FF.value.resetForm()
  showModel.value = false
}
// 弹窗里的表单
const formData = ref({
  meetingName: '',
  location: '',
  meetingTime: [],
  toastmasterId: '',
  toastmaster: '',
  participantId: '',
  participant: ''
})
const formConfig = ref({ labelWidth: '120px', ref: 'dom' })
const formColumn = ref(column)
// 获取人员列表带分页
const getUserData = async () => {
  const res = await getUser({ pageNum: 1, pageSize: 10000, userNane: null })
  if (res.code === 200) {
    formColumn.value[3].option = res.data.list.map((item) => {
      return {
        label: item.name,
        value: item.id
      }
    })
  }
}
// 多选人员
const modelValue = ref(false)
const userID = ref([])
const userList = ref([])
// 打开人员弹窗
const onFocus = () => {
  modelValue.value = true
  userID.value = formData.value.participantId.split(',')
}
// 确定选人
const onOkUser = (v) => {
  let ids = []
  let names = []
  v.forEach((item) => {
    ids.push(item.id)
    names.push(item.name)
  })
  formData.value.participantId = ids.join(',')
  formData.value.participant = names.join(',')
  modelValue.value = false
}
// 关闭弹窗 清空内容
const onCloseUser = () => {
  modelValue.value = false
}
// 表格数据
const tableData = ref([])
const getMetingData = async () => {
  const res = await getMeetingDataApi({ pageNum: 1, pageSize: 10 })
  if (res.code === 200) {
    tableData.value = res.data.list
  }
}
const formatterDate = (row) => {
  return dayjs(row.startTime).format('YYYY-MM-DD HH:mm:ss')
}
// 编辑
const handleEdit = (index, row) => {
  console.log(index, row)
  modelType.value = 'edit'
  showModel.value = true
  formData.value = JSON.parse(JSON.stringify(row))
  let start = dayjs(row.startTime).format('YYYY-MM-DD HH:mm:ss')
  let end = dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss')
  formData.value.meetingTime = [start, end]
}
const handleDelete = async(index, row) => {
  console.log(index, row)
  const res = await delMeeting({ id: row.id })
  if(res.code === 200){
    ElMessage.success('删除成功')
    getMetingData()
  }
}
const areaList =ref([])
const getArea = async()=>{
  const res = await getAreaApi()
  if(res.code === 200){
    areaList.value = listToTree(res.data, 0, 'id', 'parent')
    console.log(areaList.value)
  }
}
getUserData()
getMetingData()
getArea()
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  height: 40px;
}
</style>
